<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bootstrap Demo</title>
    <link rel="stylesheet" href="./styles/bootstrap.min.css">
    <link rel="stylesheet" href="./styles/font-awesome.min.css">
    <link rel="stylesheet" href="./styles/sign.css">
</head>

<body>
<div class="right_top">
    <div class="in_right"></div>
</div>
<div class="left_bottom">
    <div class="in_left"></div>
</div>

<div class="sign_wrap">
    <div class="sign_title">智能非洲鼓后台管理</div>
    <div class="input_group">
        <div class="info_wrap form-group">
            <input type="text" id="userName" class="input_info form-control" placeholder="请输入用户名">
            <i class="icon icon-phone"></i>
        </div>
        <div class="info_wrap form-group">
            <input type="password" id="passWord" class="input_info form-control" placeholder="请输入密码">
            <i class="icon icon-lock"></i>
        </div>
        <div class="about_pass clearfix">
            <label class="comList_forCheckbox" for="remeberPass" class="pull-left">
                记住密码
                <span></span>
                <i class="icon icon-ok"></i>
            </label>
            <input type="checkbox" id="remeberPass">
            <a id="forgetPass" class="pull-right" href="javascript: void(0);">忘记密码</a>
        </div>
        <div id="err_tit" class="err_tit">
            <p class="userName_err">用户名错误，请重新填写</p>
            <p class="passWord_err">用户名错误，请重新填写</p>
        </div>
        <a id="goSign" class="go_sign" href="javascript: void(0);">立即登录</a>
    </div>
</div>

<script src="./javascripts/jquery-1.9.1.min.js"></script>
<script src="./javascripts/bootstrap.min.js"></script>
<script src="./javascripts/jquery.cookie.min.js"></script>
<script type="text/javascript">
    $(function () {

        // checkbox
        var choose = false;
        $("label.comList_forCheckbox").click(function(e){
            if( choose ){
                console.log("我是未选中的",choose)
                $(this).children('span').removeClass("blue_bg")

            }else if( !choose ){
                console.log("我是选中的",!choose)
                $(this).children('span').addClass("blue_bg")
            }
            choose = !choose
            return choose;
        });

        // cookie

        if ($.cookie("userName") != null && $.cookie("passWord") != null) {
            $("#userName").val($.cookie("userName"));
            $("#passWord").val($.cookie("passWord"));
            $("#remeberPass").prop('checked',true);
        }
        $("#goSign").click(function() {
            console.log("-------",choose)
            if (choose) {
                // 写入cookie
                $.cookie("userName", $("#userName").val(), {
                    path: "/",
                    expires: 7
                });
                $.cookie("passWord", $("#passWord").val(), {
                    path: "/",
                    expires: 7
                });
            } else {
                $.cookie("passWord", "");
            }
        });

        // 检测手机号码
        $("#userName").blur(function(){
            if( checkPhone( $(this).val() ) ){
                $("#err_tit .userName_err").show();
                console.log("err")
            }else{
                console.log("确定")
            }
        });
        $("#userName").focus(function () {
            $("#err_tit .userName_err").hide();
            console.log("----")
        })
        function checkPhone(phone){
            if(!(/^1[34578]\d{9}$/.test(phone))){
                return false;
            }
        }

    })
</script>
</body>

</html>